<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加汽车</title>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"></script>
		<!-- <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.10.3/qs.min.js"></script> -->
	</head>
	<body>
		<div id="app">
			<h3>添加汽车</h3>
			<form action="" method="post">
				<!-- 通过v-model在表单中双向绑定数据 -->
				品牌: <input type="text" id="brand" name="brand" v-model="car.brand" />
				<br />
				型号: <input type="text" id="type" name="type" v-model="car.type" />
				<br />
				价格: <input type="text" id="price" name="price" v-model="car.price" />
				<br />
				驱动方式:
				<input type="radio" name="engine" v-model="car.engine" value="0" />燃油
				<input type="radio" name="engine" v-model="car.engine" value="1" />纯电
				<br />
				<input type="button" id="submitBtn" value="添加汽车" @click="addCar" />
				<input type="reset" value="取消" />
			</form>
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data() {
					return {
						car: {}
					}
				},
				methods: {
					addCar() {
						//发送ajax请求
						var _this = this;
						axios({
							method: "post",
							url: "http://localhost:8888/ajax/car/add",
							data: _this.car
							
							//利用QS库来转换参数
							//data: Qs.stringify(_this.car)
						}).then(function(resp) {
							//判断响应数据
							if (resp.data == "success") {
								//页面跳转
								location.href = "list_car.html";
							}
						})
					}
				}
			});
		</script>
	</body>
</html>
